<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :size="showMobilePage ? '100%' : '80%' "
    max-width="80vw"
    show-close
    append-to-body
    class="large-common-dialog-size preview-dialog">
    <div class="flex-center mb-16">
      <Title :title="title" />
      <el-button class="export-btn" size="small" plain @click="handleExport">导出表格</el-button>
    </div>
    <u-table
      v-if="handleSpliceData.length"
      :data="handleSpliceData"
      :border="true"
      :row-height="49"
      beautify-table
      height="519px"
      class="fb-table"
      element-loading-text="加载中..."
      header-cell-class-name="order-data-header-cell"
      fit
      hightlight-current-row>
      <EmptyPlaceholder slot="empty" />
      <u-table-column type="index" width="50" align="center" label="序号"/>
      <u-table-column
        v-for="(name, index) in tableData.columns"
        :key="index"
        :label="name"
        min-width="100px"
        align="left">
        <template slot-scope="scope">
          <ToolTip :content="scope.row[index]" />
        </template>
      </u-table-column>
    </u-table>
    <div v-else class="empty-container">
      <img :src="emptyImg" alt="">
      <div class="empty-text">暂无数据</div>
    </div>
    <el-row type="flex" justify="end" class="pagination-area">
      <el-pagination
        v-if="tableData.rows.length > 10"
        :current-page="currPage"
        :page-size="perPage"
        :total="tableData.rows.length"
        :page-sizes="[10, 20, 50, 100, 200]"
        :pager-count="5"
        :layout="showMobilePage?'total, prev, next, jumper':'total, prev, pager, next, sizes, jumper'"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-row>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import emptyImg from '@/assets/empty-table-data.png';
import { mapState } from 'vuex';
export default {
  name: 'ChartsPreviewDialog',
  components: { Title },
  props: {
    tableData: {
      type: Object,
      default: () => ({
        columns: [],
        rows: []
      })
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      emptyImg,
      dialogVisible: false,
      currPage: 1,
      perPage: 10
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    handleSpliceData() {
      if (!Array.isArray(this.tableData.rows) || !this.tableData.rows.length) return [];
      return this.tableData.rows.slice((this.currPage - 1) * this.perPage, this.currPage * this.perPage);
    }
  },
  methods: {
    handleSizeChange(val) {
      this.perPage = val;
    },
    handleCurrentChange(val) {
      this.currPage = val;
    },
    handleExport() {
      this.$emit('handleExport');
    },
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>

<style scoped lang="scss">
.preview-dialog {
  .empty-container {
    text-align: center;
    margin-top: 30px;
    img {
      width: 80px;
    }
    .empty-text {
      margin-top: 20px;
      color: #666;
      font-size: 14px;
    }
  }
  .export-btn {
    padding: 0 10px;
    height: 32px;
    background-color: #fff;
  }
  & ::v-deep {
    .el-dialog {
      border-radius: 12px;
    }
    .el-dialog__body {
      padding: 2px 24px 32px;
    }
    .el-dialog__close {
      font-size: 24px;
    }
  }
}
</style>
